<template>
  <div>
      <a-mentions
    :v-model:value="value"
    placeholder="请你输入你的练习方式"
    :prefix="['@', '#']"
    @search="onSearch"
  >
    <a-mentions-option v-for="val in options" :key="val" :value="val">
      {{ val }}
    </a-mentions-option>
  </a-mentions>
  </div>
</template>
<script>
import { computed, defineComponent, ref } from 'vue';
const MOCK_DATA = {
  '@': ['afc163', 'zombiej', 'yesmeck'],
  '#': ['1.0', '2.0', '3.0'],
};
export default defineComponent({
  setup() {
    const prefix = ref('@');
    const value = ref('');
    const options = computed(() => {
      return MOCK_DATA[prefix.value] || [];
    });

    const onSearch = (_, val) => {
      console.log(_, val);
      prefix.value = val;
    };

    return {
      value,
      options,
      onSearch,
    };
  },

});
</script>